<template>
	<view class="outBox">
		<u-navbar leftText="预约座位" leftIconColor="#fff" :autoBack="true" bgColor="#242331">
			<view class="left-slot" slot="left">
				 <u-icon name="arrow-left" color="#fff"></u-icon>
				<text>预约座位</text>
			</view>
			<view class="left-slot" slot="right" :style="{
				marginRight:barWidth + 'px'
			}">
				<text @click="getnav('/pages/reservation/mine')">我的预约</text>
			</view>
		</u-navbar>
		<view class="" :style="{
			marginTop:menuHeight + 'px',
		}">
			<view class="content" :style="{
				height:`calc(100vh - ${menuHeight}px)`
			}">
				<image class="bg" :src="baseImgUrl + 'reservation/banner.png'" mode="scaleToFill"></image>
				<view class="item">
					<view class="name">
						男生
					</view>
					<view class="value">
						<u--input v-model="reservationForm.manNum" inputAlign="right" type="number" color="#fff"
							placeholder="请输入男生人数" border="bottom"></u--input>
					</view>
				</view>
				<view class="item">
					<view class="name">
						女生
					</view>
					<view class="value">
						<u--input v-model="reservationForm.womenNum" inputAlign="right" type="number" color="#fff"
							placeholder="请输入女生人数" border="bottom"></u--input>
					</view>
				</view>
				<view class="item">
					<view class="name">
						选择座位
					</view>
					<view class="value">
						<text>{{tableName}}</text>
					</view>
				</view>
				<view class="item">
					<view class="name">
						当前最高竞价
					</view>
					<view class="value">
						<text>500</text>
					</view>
				</view>
				<view class="item">
					<view class="name">
						竞价
					</view>
					<view class="value">
						<u--input inputAlign="right" type="number" color="#fff" v-model="reservationForm.bindingPrice"
							placeholder="输入竞价" border="bottom"></u--input>
					</view>
				</view>
				<view class="item">
					<view class="name">
						是否接受组局
					</view>
					<view class="value">
						<u-radio-group v-model="reservationForm.isAccept" placement="row" labelColor="#fff">
							<u-radio label="是" :name="true">
							</u-radio>
							<view class="width-20">

							</view>
							<u-radio label="否" :name="false">
							</u-radio>
						</u-radio-group>
					</view>
				</view>

				<view class="btns">
					<view class="btn" @click="handleSuccess">
						确认支付
					</view>
				</view>
			</view>
		</view>

		<lingfeng-timepicker ref="timePop" type="datetime" :minDate="minDate" :maxDate="maxDate"
			@change="timeChange"></lingfeng-timepicker>

	</view>
</template>

<script>
	import {
		getWXStatusHeight
	} from '@/utils/index.js'


	export default {
		data() {
			return {
				// 胶囊的宽度
				barWidth: 0,
				menuHeight: 0,
				reservationForm: {
					isAccept: false, // 接受组局
					time: '',
					seat: '', // 座位
					manNum: '', // 男人数量
					womenNum: '', // 女人数量
					bindingPrice:'', // 竞价
				},
				showTimePicker: false, // 显示时间选择器
				minDate: {
					year: new Date().getFullYear(),
					month: new Date().getMonth() + 1,
					date: new Date().getDate(),
					hour: new Date().getHours()
				},
				maxDate: {
					year: new Date().getFullYear(),
					month: 12,
					date: 31
				},
				// 座位号
				tableName: '',
			}
		},
		onLoad(e) {
			let obj = getWXStatusHeight()
			this.barWidth = obj.barWidth + 3
			this.menuHeight = obj.menuHeight
			this.tableName = e.tableName || '-'
			this.reservationForm.bindingPrice = parseInt(e.price ) + 1
		},
		methods: {
			// 发起支付
			handleSuccess() {
				if (this.validateInput()) {
					uni.setStorageSync('orderInfo',this.reservationForm)
					this.getnav('waitPay?type=2')
				}
			},
			// 验证输入
			validateInput() {
				if (this.reservationForm.manNum == '') {
					this.$toast("请输入男生数量")
					return false
				}
				if (this.reservationForm.womenNum == '') {
					this.$toast("请输入女生数量")
					return false
				}
				if (this.reservationForm.bindingPrice == '') {
					this.$toast("请输入竞价")
					return false
				}
				return true
			},
			changeSharing(e) {
				console.log(e, "eee");
			},
			// 选择手机号
			changePhone(e) {
				this.reservationForm.phone = e
			}, // 选择人数
			changePeople(e) {
				this.reservationForm.peopleNum = e
			},
			// 选择时间
			handleTimePicker() {
				this.$refs.timePop.show();
			},
			// 确认选择
			confirmTimePicker() {
				this.showTimePicker = false
			},
			timeChange(e) {
				this.reservationForm.time = e
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btns {
		display: flex;
		justify-content: space-between;
		position: relative;
		z-index: 3;
		padding: 0 30rpx;
		margin-top: 30rpx;

		.btn {
			width: 100%;
			line-height: 80rpx;
			text-align: center;
			color: #fff;
			border-radius: 30rpx;
			background-color: #5aa10c;
		}

		.active {
			background-color: #90ff10;
		}
	}

	.width-20 {
		width: 20rpx;
		height: 20rpx;
	}

	.content {
		position: relative;
		margin: 40rpx;
		box-sizing: border-box;
		border-radius: 30rpx;

		.item {
			position: relative;
			z-index: 3;
			padding: 15px 30rpx;
			border-bottom: 1rpx solid #454b56;
		}

		.value {
			color: #fff;
			text-align: right;
		}

		.item {
			display: flex;
			justify-content: space-between;
			color: #fff;
		}

		.bg {
			width: 100%;
			height: 95%;
			position: absolute;
			z-index: 2;
		}
	}

	.left-slot {
		color: #fff;

		image {
			width: 40rpx;
			margin-right: 30rpx;
		}
	}

	.outBox {
		background-color: #21202d;
	}
</style>
